<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(110, 223, 223);
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
</head>
<body>
    <!-- 12. 将定时器的开始和停止过程书写在不同的事件函数内部，
    容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。 -->
    <input type="button" value="开始" id="start">
    <input type="button" value="停止" id="stop">
    <div id="box" class="box"></div>

    <script src="js/common.js"></script>
    <script>
        // 获取元素
        var start = my$("start");
        var stop = my$("stop");
        var box = my$("box");
        
        // 点击开始让box运动
        // 开始位置
        var currentLeft = box.offsetLeft;
            // console.log(currentLeft);
        var timer;
        start.onclick = function(){
            // 设表先关方法清除前面的定时器
            clearInterval(timer);
            // 开启定时器
            var interval = 100;
            timer = setInterval(function(){
                currentLeft += 30;
                box.style.left = currentLeft + "px" ; 
            },interval);    
        }
        stop.onclick = function(){
            clearInterval(timer);
        }


    </script>



</body>
</html>